<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苹果官网头部</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/banner.css">
    <link rel="stylesheet" type="text/css" href="css/hbanner.css">
</head>
<body>
    <div class="nav">
        <a href="" class="logo"></a>
        <a href="" class="text">MAC</a>
        <a href="" class="text">IPAD</a>
        <a href="" class="text">IPHONE</a>
        <a href="" class="text">WATCH</a>
        <a href="" class="text">TV</a>
        <a href="" class="text">MUSIC</a>
        <a href="" class="text">SUPPORT</a>
        <a href="" class="search"></a>
        <a href="" class="buy"></a>
        <input hidden="hidden" type="checkbox" name="choose" id="choose" />
        <label for="choose" class="toggleBtn">
            <span class="line"></span>
            <span class="line"></span>
        </label>
        <div class="navpage">
            <div class="navMain">
                <div class="searchInput">
                    <div class="icon"></div>
                    <input type="text" placeholder="search apple.com" />
                </div>
                <!-- <hr> -->
                <div class="navList">
                    <a href="" class="navText">MAC</a>
                    <a href="" class="navText">IPAD</a>
                    <a href="" class="navText">IPHONE</a>
                    <a href="" class="navText">WATCH</a>
                    <a href="" class="navText">TV</a>
                    <a href="" class="navText">MUSCI</a>
                    <a href="" class="navText">SUPPORT</a>
                </div>
            </div>
        </div>
    </div>


    <!-- banner .banner>(h1+h2+p+.link>(a*2))-->

    <div class="banner">
        <h1>iPhone SE</h1>
        <h2>称心称手，超值入手。</h2>
        <h2>RMB 3299 起</h2>
        <p>折抵换购，仅 RMB 96/月或 RMB 2299 起</p>
        <div class="link">
            <a href="">进一步了解</a><span>></span>
            <a href="">购买</a><span>></span>
        </div>
    </div>
    
    
    <div class="hbanner">
        <div class="banner">
            <h1>这一刻，属于你</h1>
            <h2>
                让你的 AirPods 更显个性，免费
                <br>
                服务，Apple 独家福利。
            </h2>
            <div class="link">
                <a href="">进一步了解</a><span>></span>
                <a href="">购买</a><span>></span>
            </div>
        </div>
        <div class="banner">
            <h1>
                为高校生活购买 
                <br>
                Mac 或 iPad，
                <br>
                AirPods 搭配其中。
            </h1>
            
            <div class="link">
                <!-- <a href="">进一步了解</a><span>></span> -->
                <a href="">选购</a><span>></span>
            </div>
        </div>
    </div>
</body>
</html>